import React, { useEffect, useState, useRef } from 'react'
import Nav from "../../component/Nav"
import { TextArea } from "antd-mobile/2x"
import { filterTimeLLL } from "../../utils/filterTime"
import api from '../../api/news';
import fd from "../../utils/fd"
import "./index.scss"
let ws = null;
export default function GoodDetails(props) {
    const [value, setValue] = useState('')
    const { state } = props.location;
    const [list, setList] = useState([]);
    const news = useRef(null);

    const getList = () => {
        api.getNewsList({
            sender_id: state.sender_id,
            receive_id: state.receive_id,
        }).then(res => {
            console.log(res);
            setList([...res.data.data])
            ws.send(JSON.stringify({
                list: res.data.data
            }))
        })
    }
    useEffect(() => {
        getList();
        if (window.WebSocket) {
            ws = new WebSocket("ws://localhost:8090");
            //链接成功
            ws.addEventListener("open", (e) => {
                console.log("链接成功");
            })
            // //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            //接收服务端返回的数据
            ws.onmessage = (e) => {
                let resData = JSON.parse(e.data);
                setList([...resData.list])
            };
            ws.onerror = () => {
                console.log("出错了");
            };
        }
    }, []);

    useEffect(() => {
        const scroll = news.current;
        let top = scroll.scrollHeight - scroll.clientHeight;
        scroll.scrollTo(0, top);
    }, [list])
    const sendNews = (e) => {
        if (e.keyCode === 13 && value !== "") {
            const user = JSON.parse(localStorage.getItem("user"));
            fd(() => {
                api.sendNews({
                    sender_id: user.id,
                    sender_name: user.nickname,
                    sender_context: value,
                    receive_id: state.sender_id,
                    sender_headImg: user.headImg || ""
                }).then(res => {
                    if (res.success) {
                        getList();

                    }
                });
                setValue("");
            })


        }
    }

    return (
        <div className='newsDetails'>
            {/* id: 2
                isSee: 0
                receive_id: 5
                sender_context: "步步萨队好is电话袄is电话"
                sender_headImg: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffb9431a4c99691e54952d85ed034faf9a6b7e4f22d45-xy5FHF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642992836&t=6e008edf1314a1617ab0b9498711176f"
                sender_id: 2
                sender_name: "李想"
                sender_time: 1640517999656 */}
            <Nav backColor="#eee">{state.name}</Nav>
            <div className="newsBox_details" ref={news}>
                {
                    list.length > 0 && list.map(v => {
                        return <div className='news_item' key={v.id}>
                            <p style={{ color: v.sender_id === state.receive_id ? "rgba(37, 209, 152, 0.87)" : "#000", justifyContent: v.sender_id === state.receive_id ? "right" : "left" }}><b>{v.sender_name}</b><span>{filterTimeLLL(v.sender_time)}</span></p>
                            <p style={{ display: "flex", justifyContent: v.sender_id === state.receive_id ? "right" : "left" }}>{v.sender_context}</p>
                        </div>
                    })
                }
            </div>
            <div className="sendOut" onKeyDownCapture={(e) => { sendNews(e) }} >
                <TextArea
                    placeholder='请输入内容'
                    value={value}
                    rows={5}
                    onChange={val => {
                        if (val !== "/n") setValue(val);
                    }}

                    style={{ height: "200px" }}
                />
            </div>

        </div>
    )
}
